<template>
  <div class="box">
    {{ msg }}--{{ msg1 }}
    <h1 v-text="age < 18 ? '老了' : '年轻'"> 1111</h1>
    <a :href="url">11</a>
    <input type="text" :value="msg">
    <input type="checkbox" :checked='flag'>
    <img :src="src1" alt="">
    <button @click="fn(10)">anyixia</button>
    <button @click="fn(20)">anyixia</button>
    <div @click='fnn'>
      <button @click="fn($event,30)">anyixxxxia</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      src1:'https://img1.baidu.com/it/u=4276577497,1245676324&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=309',
      flag:false,
      url:'https://www.baidu.com',
      age: 12,
      msg: '这是一个寂寞的天',
      msg1: '下着有些伤心的雨',
      msg2:'hello world'
    }
  },
  methods: {
    fn(e,num){
      // console.log('这是一个寂寞的天');
      e.stopPropagation(); 
      console.log(num);
     
    },
    fnn(){
     console.log('div');
    }
  },
}
</script>

<style lang="less">
.box {
  color: red;
  .colorr {
    color: skyblue;
  }
}
</style>
